<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <meta name="apple-mobile-web-app-title" content="标题"> <!-- 添加到主屏后的标题（iOS 6 新增） -->
    <meta name="apple-mobile-web-app-capable" content="yes"><!-- 是否启用 WebApp 全屏模式 -->
    <meta name="apple-mobile-web-app-status-bar-style" content="white-translucent">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="css/mobile_reset.css">
    <link rel="stylesheet" href="css/mui.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/exchange_center.css">
    <title>试用进展</title>
    <script>
        (function () {
            document.addEventListener('DOMContentLoaded', function () {
                var html = document.documentElement;
                var windowWidth = html.clientWidth;
                html.style.fontSize = windowWidth / 7.5 + 'px';
                // 等价于html.style.fontSize = windowWidth / 750 * 100 + 'px';
            }, false);
        })();

        // 这个7.5就是根据设计稿的横向宽度来确定的，假如你的设计稿是640
        // 那么 html.style.fontSize = windowWidth / 6.4 + 'px';
    </script>
</head>
<body>
<header>
    <ul class="try_header">
        <li>
            <a class="a_active" href="#">全部商品</a>
            <b class="underline_active"></b>
        </li>
        <li>
            <a href="#">包邮专场</a>
            <b></b>
        </li>
        <li>
            <a href="#">付邮专场</a>
            <b></b>
        </li>
        <li>
            <a href="#">明日预告</a>
            <b></b>
        </li>
    </ul>
</header>
<nav>
    <div class="left_nav">
        <span class="span_active">剩余份数</span>
        <span>价格</span>
    </div>
    <div class="left nav mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
        <ul class="mui-scroll">
            <li class="classify mui-control-item classify_active">居家生活</li>
            <li class="classify mui-control-item">时尚女装</li>
            <li class="classify mui-control-item">精品男装</li>
            <li class="classify mui-control-item">护肤美妆</li>
            <li class="classify mui-control-item">鞋包配饰</li>
            <li class="classify mui-control-item">时尚女装</li>
            <li class="classify mui-control-item">精品男装</li>
            <li class="classify mui-control-item">护肤美妆</li>
            <li class="classify mui-control-item">鞋包配饰</li>
            <li class="classify mui-control-item">时尚女装</li>
            <li class="classify mui-control-item">精品男装</li>
            <li class="classify mui-control-item">护肤美妆</li>
            <li class="classify mui-control-item">鞋包配饰</li>
        </ul>
    </div>
</nav>

<!--推荐试用-->
<div class="recommend-try">
    <!--推荐试用商品-->
    <div class="recommend-try-goods">
        <ul>
            <li>
                <a href="detail.html">
                    <img src="images/poster_bg_poster01_default@2x.png " />
                </a>
                <div class="goods-description">
                    <p class="one">花谢花飞花满天，红消香断有谁怜。</p>
                    <p class="two">
                        <span>价值：<b>&yen;288.00</b></span>
                        <span class="pinkage">包邮</span>
                    </p>
                    <p class="three">
                        <span>限量：<b>10份</b></span>
                        <span class="applyFor">已申请<b>1000份</b></span>
                    </p>
                </div>
            </li>
            <li>
                <a href="detail.html">
                    <img src="images/poster_bg_poster01_default@2x.png " />
                </a>
                <div class="goods-description">
                    <p class="one">花谢花飞花满天，红消香断有谁怜。</p>
                    <p class="two">
                        <span>价值：<b>&yen;288.00</b></span>
                        <span class="pinkage">包邮</span>
                    </p>
                    <p class="three">
                        <span>限量：<b>10份</b></span>
                        <span class="applyFor">已申请<b>1000份</b></span>
                    </p>
                </div>
            </li>

            <li>
                <a href="detail.html">
                    <img src="images/poster_bg_poster01_default@2x.png " />
                </a>
                <div class="goods-description">
                    <p class="one">花谢花飞花满天，红消香断有谁怜。</p>
                    <p class="two">
                        <span>价值：<b>&yen;288.00</b></span>
                        <span class="notPinkage">付邮</span>
                    </p>
                    <p class="three">
                        <span>限量：<b>10份</b></span>
                        <span class="applyFor">已申请<b>1000份</b></span>
                    </p>
                </div>
            </li>
            <li>
                <a href="detail.html">
                    <img src="images/poster_bg_poster01_default@2x.png " />
                </a>
                <div class="goods-description">
                    <p class="one">花谢花飞花满天，红消香断有谁怜。</p>
                    <p class="two">
                        <span>价值：<b>&yen;288.00</b></span>
                        <span class="pinkage">包邮</span>
                    </p>
                    <p class="three">
                        <span>限量：<b>10份</b></span>
                        <span class="applyFor">已申请<b>1000份</b></span>
                    </p>
                </div>
            </li>

            <li>
                <a href="detail.html">
                    <img src="images/poster_bg_poster01_default@2x.png " />
                </a>
                <div class="goods-description">
                    <p class="one">花谢花飞花满天，红消香断有谁怜。</p>
                    <p class="two">
                        <span>价值：<b>&yen;288.00</b></span>
                        <span class="notPinkage">付邮</span>
                    </p>
                    <p class="three">
                        <span>限量：<b>10份</b></span>
                        <span class="applyFor">已申请<b>1000份</b></span>
                    </p>
                </div>
            </li>
            <li>
                <a href="detail.html">
                    <img src="images/poster_bg_poster01_default@2x.png " />
                </a>
                <div class="goods-description">
                    <p class="one">花谢花飞花满天，红消香断有谁怜。</p>
                    <p class="two">
                        <span>价值：<b>&yen;288.00</b></span>
                        <span class="pinkage">包邮</span>
                    </p>
                    <p class="three">
                        <span>限量：<b>10份</b></span>
                        <span class="applyFor">已申请<b>1000份</b></span>
                    </p>
                </div>
            </li>
        </ul>
    </div>
</div>
<!--页面底部导航条-->
<footer id="nav"></footer>
<script src="js/jquery-1.10.2.js "></script>
<script src="js/mui.js "></script>
<script>
    $(function(){
        $('#nav').load('footer_nav.html',function(){
            $('#allGoods').find('img').attr('src','images/tab_icon_duihuan_selected@2x.png');
            $('#allGoods').addClass('mui-active');
        });

        $('.try_header li').on('tap',function(){
            $(this).find('a').addClass('a_active');
            $(this).siblings().find('a').removeClass('a_active');
            $(this).find('b').addClass('underline_active');
            $(this).siblings().find('b').removeClass('underline_active')
        });
        $('.left_nav span').on('tap',function(){
            $(this).addClass('span_active');
            $(this).siblings().removeClass('span_active');
        });

        //        <!--分类精选头部导航-->
        $('.classify').bind("tap", function(){
            $(this).addClass('classify_active');
            $(this).siblings().removeClass('classify_active');
        });
    })
</script>
</body>
</html>













